PhpDebugBar.Widget.extend.render   C
last analyzed

Complexity

Conditions 7
Paths 40

Size

Total Lines 30

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
c 0
b 0
f 0
dl 0
loc 30
rs 6.7272
cc 7
nc 40
nop 2
1
if (typeof(PhpDebugBar) == 'undefined') {
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar seems to be never initialized.
Loading history...
2
    // namespace
3
    var PhpDebugBar = {};
4
    PhpDebugBar.$ = jQuery;
5
}
6
7
(function($) {
8
9
    /**
10
     * @namespace
11
     */
12
    PhpDebugBar.Widgets = {};
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
13
14
    /**
15
     * Replaces spaces with &nbsp; and line breaks with <br>
16
     *
17
     * @param {String} text
18
     * @return {String}
19
     */
20
    var htmlize = PhpDebugBar.Widgets.htmlize = function(text) {
21
        return text.replace(/\n/g, '<br>').replace(/\s/g, "&nbsp;")
22
    };
23
24
    /**
25
     * Returns a string representation of value, using JSON.stringify
26
     * if it's an object.
27
     *
28
     * @param {Object} value
29
     * @param {Boolean} prettify Uses htmlize() if true
30
     * @return {String}
31
     */
32
    var renderValue = PhpDebugBar.Widgets.renderValue = function(value, prettify) {
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
33
        if (typeof(value) !== 'string') {
34
            if (prettify) {
35
                return htmlize(JSON.stringify(value, undefined, 2));
36
            }
37
            return JSON.stringify(value);
38
        }
39
        return value;
40
    };
41
42
    /**
43
     * Highlights a block of code
44
     *
45
     * @param  {String} code
46
     * @param  {String} lang
47
     * @return {String}
48
     */
49
    var highlight = PhpDebugBar.Widgets.highlight = function(code, lang) {
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
50
        if (typeof(code) === 'string') {
51
            if (typeof(hljs) === 'undefined') {
0 ignored issues
show
Bug introduced by
The variable hljs seems to be never declared. If this is a global, consider adding a /** global: hljs */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
52
                return htmlize(code);
53
            }
54
            if (lang) {
55
                return hljs.highlight(lang, code).value;
56
            }
57
            return hljs.highlightAuto(code).value;
58
        }
59
60
        if (typeof(hljs) === 'object') {
61
            code.each(function(i, e) { hljs.highlightBlock(e); });
0 ignored issues
show
Bug introduced by
The variable hljs seems to be never declared. If this is a global, consider adding a /** global: hljs */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
62
        }
63
        return code;
64
    };
65
66
    /**
67
     * Creates a <pre> element with a block of code
68
     *
69
     * @param  {String} code
70
     * @param  {String} lang
71
     * @return {String}
72
     */
73
    var createCodeBlock = PhpDebugBar.Widgets.createCodeBlock = function(code, lang) {
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
74
        var pre = $('<pre />');
75
        $('<code />').text(code).appendTo(pre);
76
        if (lang) {
77
            pre.addClass("language-" + lang);
78
        }
79
        highlight(pre);
80
        return pre;
81
    };
82
83
    var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
84
85
86
    // ------------------------------------------------------------------
87
    // Generic widgets
88
    // ------------------------------------------------------------------
89
90
    /**
91
     * Displays array element in a <ul> list
92
     *
93
     * Options:
94
     *  - data
95
     *  - itemRenderer: a function used to render list items (optional)
96
     */
97
    var ListWidget = PhpDebugBar.Widgets.ListWidget = PhpDebugBar.Widget.extend({
98
99
        tagName: 'ul',
100
101
        className: csscls('list'),
102
103
        initialize: function(options) {
104
            if (!options['itemRenderer']) {
105
                options['itemRenderer'] = this.itemRenderer;
106
            }
107
            this.set(options);
108
        },
109
110
        render: function() {
111
            this.bindAttr(['itemRenderer', 'data'], function() {
112
                this.$el.empty();
113
                if (!this.has('data')) {
114
                    return;
115
                }
116
117
                var data = this.get('data');
118
                for (var i = 0; i < data.length; i++) {
119
                    var li = $('<li />').addClass(csscls('list-item')).appendTo(this.$el);
120
                    this.get('itemRenderer')(li, data[i]);
121
                }
122
            });
123
        },
124
125
        /**
126
         * Renders the content of a <li> element
127
         *
128
         * @param {jQuery} li The <li> element as a jQuery Object
129
         * @param {Object} value An item from the data array
130
         */
131
        itemRenderer: function(li, value) {
132
            li.html(renderValue(value));
133
        }
134
135
    });
136
137
    // ------------------------------------------------------------------
138
139
    /**
140
     * Displays object property/value paris in a <dl> list
141
     *
142
     * Options:
143
     *  - data
144
     *  - itemRenderer: a function used to render list items (optional)
145
     */
146
    var KVListWidget = PhpDebugBar.Widgets.KVListWidget = ListWidget.extend({
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
147
148
        tagName: 'dl',
149
150
        className: csscls('kvlist'),
151
152
        render: function() {
153
            this.bindAttr(['itemRenderer', 'data'], function() {
154
                this.$el.empty();
155
                if (!this.has('data')) {
156
                    return;
157
                }
158
159
                var self = this;
160
                $.each(this.get('data'), function(key, value) {
161
                    var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el);
162
                    var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el);
163
                    self.get('itemRenderer')(dt, dd, key, value);
164
                });
165
            });
166
        },
167
168
        /**
169
         * Renders the content of the <dt> and <dd> elements
170
         *
171
         * @param {jQuery} dt The <dt> element as a jQuery Object
172
         * @param {jQuery} dd The <dd> element as a jQuery Object
173
         * @param {String} key Property name
174
         * @param {Object} value Property value
175
         */
176
        itemRenderer: function(dt, dd, key, value) {
177
            dt.text(key);
178
            dd.html(htmlize(value));
179
        }
180
181
    });
182
183
    // ------------------------------------------------------------------
184
    
185
    /**
186
     * An extension of KVListWidget where the data represents a list
187
     * of variables
188
     * 
189
     * Options:
190
     *  - data
191
     */
192
    var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
Unused Code introduced by
The assignment to variable VariableListWidget seems to be never used. Consider removing it.
Loading history...
193
194
        className: csscls('kvlist varlist'),
195
196
        itemRenderer: function(dt, dd, key, value) {
197
            $('<span />').attr('title', key).text(key).appendTo(dt);
198
199
            var v = value;
200
            if (v && v.length > 100) {
201
                v = v.substr(0, 100) + "...";
202
            }
203
            var prettyVal = null;
204
            dd.text(v).click(function() {
205
                if (dd.hasClass(csscls('pretty'))) {
206
                    dd.text(v).removeClass(csscls('pretty'));
207
                } else {
208
                    prettyVal = prettyVal || createCodeBlock(value);
209
                    dd.addClass(csscls('pretty')).empty().append(prettyVal);
210
                }
211
            });
212
        }
213
214
    });
215
216
    // ------------------------------------------------------------------
217
    
218
    /**
219
     * Iframe widget
220
     *
221
     * Options:
222
     *  - data
223
     */
224
    var IFrameWidget = PhpDebugBar.Widgets.IFrameWidget = PhpDebugBar.Widget.extend({
0 ignored issues
show
Unused Code introduced by
The assignment to variable IFrameWidget seems to be never used. Consider removing it.
Loading history...
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
225
226
        tagName: 'iframe',
227
228
        className: csscls('iframe'),
229
230
        render: function() {
231
            this.$el.attr({
232
                seamless: "seamless",
233
                border: "0",
234
                width: "100%",
235
                height: "100%"
236
            });
237
            this.bindAttr('data', function(url) { this.$el.attr('src', url); });
238
        }
239
240
    });
241
242
243
    // ------------------------------------------------------------------
244
    // Collector specific widgets
245
    // ------------------------------------------------------------------
246
247
    /**
248
     * Widget for the MessagesCollector
249
     *
250
     * Uses ListWidget under the hood
251
     *
252
     * Options:
253
     *  - data
254
     */
255
    var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({
0 ignored issues
show
Unused Code introduced by
The assignment to variable MessagesWidget seems to be never used. Consider removing it.
Loading history...
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
256
257
        className: csscls('messages'),
258
259
        render: function() {
260
            var self = this;
261
262
            this.$list = new ListWidget({ itemRenderer: function(li, value) {
263
                var m = value.message;
264
                if (m.length > 100) {
265
                    m = m.substr(0, 100) + "...";
266
                }
267
268
                var val = $('<span />').addClass(csscls('value')).text(m).appendTo(li);
269
                if (!value.is_string || value.message.length > 100) {
270
                    var prettyVal = value.message;
271
                    if (!value.is_string) {
272
                        prettyVal = null;
273
                    }
274
                    li.css('cursor', 'pointer').click(function() {
275
                        if (val.hasClass(csscls('pretty'))) {
276
                            val.text(m).removeClass(csscls('pretty'));
277
                        } else {
278
                            prettyVal = prettyVal || createCodeBlock(value.message, 'php');
279
                            val.addClass(csscls('pretty')).empty().append(prettyVal);
280
                        }
281
                    });
282
                }
283
284
                if (value.label) {
285
                    val.addClass(csscls(value.label));
286
                    $('<span />').addClass(csscls('label')).text(value.label).appendTo(li);
287
                }
288
                if (value.collector) {
289
                    $('<span />').addClass(csscls('collector')).text(value.collector).appendTo(li);
290
                }
291
            }});
292
293
            this.$list.$el.appendTo(this.$el);
294
            this.$toolbar = $('<div><i class="phpdebugbar-fa phpdebugbar-fa-search"></i></div>').addClass(csscls('toolbar')).appendTo(this.$el);
295
296
            $('<input type="text" />')
297
                .on('change', function() { self.set('search', this.value); })
298
                .appendTo(this.$toolbar);
299
300
            this.bindAttr('data', function(data) {
301
                this.set({ exclude: [], search: '' });
302
                this.$toolbar.find(csscls('.filter')).remove();
303
304
                var filters = [], self = this;
305
                for (var i = 0; i < data.length; i++) {
306
                    if (!data[i].label || $.inArray(data[i].label, filters) > -1) {
307
                        continue;
308
                    }
309
                    filters.push(data[i].label);
310
                    $('<a />')
311
                        .addClass(csscls('filter'))
312
                        .text(data[i].label)
313
                        .attr('rel', data[i].label)
314
                        .on('click', function() { self.onFilterClick(this); })
315
                        .appendTo(this.$toolbar);
316
                }
317
            });
318
319
            this.bindAttr(['exclude', 'search'], function() {
320
                var data = this.get('data'),
321
                    exclude = this.get('exclude'),
322
                    search = this.get('search'),
323
                    caseless = false,
324
                    fdata = [];
325
326
                if (search && search === search.toLowerCase()) {
327
                    caseless = true;
328
                }
329
330
                for (var i = 0; i < data.length; i++) {
331
                    var message = caseless ? data[i].message.toLowerCase() : data[i].message;
332
333
                    if ((!data[i].label || $.inArray(data[i].label, exclude) === -1) && (!search || message.indexOf(search) > -1)) {
334
                        fdata.push(data[i]);
335
                    }
336
                }
337
338
                this.$list.set('data', fdata);
339
            });
340
        },
341
342
        onFilterClick: function(el) {
343
            $(el).toggleClass(csscls('excluded'));
344
345
            var excludedLabels = [];
346
            this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() {
347
                excludedLabels.push(this.rel);
348
            });
349
350
            this.set('exclude', excludedLabels);
351
        }
352
353
    });
354
355
    // ------------------------------------------------------------------
356
357
    /**
358
     * Widget for the TimeDataCollector
359
     *
360
     * Options:
361
     *  - data
362
     */
363
    var TimelineWidget = PhpDebugBar.Widgets.TimelineWidget = PhpDebugBar.Widget.extend({
0 ignored issues
show
Unused Code introduced by
The assignment to variable TimelineWidget seems to be never used. Consider removing it.
Loading history...
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
364
365
        tagName: 'ul',
366
367
        className: csscls('timeline'),
368
369
        render: function() {
370
            this.bindAttr('data', function(data) {
371
                this.$el.empty();
372
                if (data.measures) {
373
                    for (var i = 0; i < data.measures.length; i++) {
374
                        var measure = data.measures[i];
375
                        var m = $('<div />').addClass(csscls('measure')),
376
                            li = $('<li />'),
377
                            left = (measure.relative_start * 100 / data.duration).toFixed(2),
378
                            width = Math.min((measure.duration * 100 / data.duration).toFixed(2), 100 - left);
379
380
                        m.append($('<span />').addClass(csscls('value')).css({
381
                            left: left + "%",
382
                            width: width + "%"
383
                        }));
384
                        m.append($('<span />').addClass(csscls('label')).text(measure.label + " (" + measure.duration_str + ")"));
385
386
                        if (measure.collector) {
387
                            $('<span />').addClass(csscls('collector')).text(measure.collector).appendTo(m);
388
                        }
389
390
                        m.appendTo(li);
391
                        this.$el.append(li);
392
                        
393
                        if (measure.params && !$.isEmptyObject(measure.params)) {
394
                            var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li);
395
                            for (var key in measure.params) {
0 ignored issues
show
Complexity introduced by
A for in loop automatically includes the property of any prototype object, consider checking the key using hasOwnProperty.

When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically:

var someObject;
for (var key in someObject) {
    if ( ! someObject.hasOwnProperty(key)) {
        continue; // Skip keys from the prototype.
    }

    doSomethingWith(key);
}
Loading history...
396
                                if (typeof measure.params[key] !== 'function') {
397
                                    table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') +
398
                                    '"><pre><code>' + measure.params[key] + '</code></pre></td></tr>');
399
                                }
400
                            }
401
                            li.css('cursor', 'pointer').click(function() {
402
                                var table = $(this).find('table');
403
                                if (table.is(':visible')) {
404
                                    table.hide();
405
                                } else {
406
                                    table.show();
407
                                }
408
                            });
409
                        }
410
                    }
411
                }
412
            });
413
        }
414
415
    });
416
417
    // ------------------------------------------------------------------
418
    
419
    /**
420
     * Widget for the displaying exceptions
421
     *
422
     * Options:
423
     *  - data
424
     */
425
    var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
Unused Code introduced by
The assignment to variable ExceptionsWidget seems to be never used. Consider removing it.
Loading history...
426
427
        className: csscls('exceptions'),
428
429
        render: function() {
430
            this.$list = new ListWidget({ itemRenderer: function(li, e) {
431
                $('<span />').addClass(csscls('message')).text(e.message).appendTo(li);
432
                if (e.file) {
433
                    $('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li);
434
                }
435
                if (e.type) {
436
                    $('<span />').addClass(csscls('type')).text(e.type).appendTo(li);
437
                }
438
                if (e.surrounding_lines) {
439
                    var pre = createCodeBlock(e.surrounding_lines.join(""), 'php').addClass(csscls('file')).appendTo(li);
440
                    li.click(function() {
441
                        if (pre.is(':visible')) {
442
                            pre.hide();
443
                        } else {
444
                            pre.show();
445
                        }
446
                    });
447
                }
448
            }});
449
            this.$list.$el.appendTo(this.$el);
450
451
            this.bindAttr('data', function(data) {
452
                this.$list.set('data', data);
453
                if (data.length == 1) {
454
                    this.$list.$el.children().first().find(csscls('.file')).show();
455
                }
456
            });
457
458
        }
459
460
    });
461
    
462
463
})(PhpDebugBar.$);
0 ignored issues
show
Bug introduced by
The variable PhpDebugBar does not seem to be initialized in case typeof PhpDebugBar == "undefined" on line 1 is false. Are you sure this can never be the case?
Loading history...
464